﻿
@{
    ViewBag.Title = "Hello";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Hello</h2>

<div class="row-fluid" style="padding: 15px 0;">
    <p>Session值为：@ViewBag.SessionValue </p>
</div>

<div style="padding:10px 0;">

    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

</div>

<br />

<table id="table" class="table table-striped table-sm table-hover" style="padding-top:10px;">
    <thead class="thead-dark">
        <tr>
            <th data-field="id">ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price">Item Price</th>
        </tr>
    </thead>
</table>

@section Scripts {

    @*<link href="~/Content/bootstrap-table.css" rel="stylesheet" />
        <script src="~/Scripts/bootstrap-table.js"></script>
        <script src="~/Scripts/locales/bootstrap-table-zh-CN.js"></script>*@

    <script type="text/javascript">
        var $table = $('#table')

        $(function () {
            $('[data-toggle="popover"]').popover();
            $('[data-toggle="tooltip"]').tooltip();
        });

        $(function () {
            var data = [
                {
                    'id': 0,
                    'name': 'Item 0',
                    'price': '$0'
                },
                {
                    'id': 1,
                    'name': 'Item 1',
                    'price': '$1'
                },
                {
                    'id': 2,
                    'name': 'Item 2',
                    'price': '$2'
                },
                {
                    'id': 3,
                    'name': 'Item 3',
                    'price': '$3'
                },
                {
                    'id': 4,
                    'name': 'Item 4',
                    'price': '$4'
                },
                {
                    'id': 5,
                    'name': 'Item 5',
                    'price': '$5'
                }
            ]
            $table.bootstrapTable({ data: data })

            $table.bootstrapTable('refreshOptions', {
                theadClasses: "thead-dark"
            });
        })
    </script>

}